<template>
    <div>
        <el-card shadow="never" class="border-0">
            <!-- 搜索 -->
            <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
                <el-row :gutter="20">
                    <el-col :span="5" :offset="0">
                        <el-form-item label="工单号">
                            <el-input v-model="searchForm.orderNo" placeholder="工单号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="0">
                        <el-form-item label="工单名称">
                            <el-input v-model="searchForm.orderName" placeholder="工单名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="0">
                        <el-form-item label="工单状态">
                            <el-select v-model="searchForm.orderStatus" placeholder="工单状态">
                                <el-option v-for="item in orderStatus" :key="item.code" :label="item.description"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <div class="flex items-center justify-end">
                            <el-button type="primary" @click="getData">搜索</el-button>
                            <el-button @click="resetSearchForm">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
                <el-table-column label="工单号" align="center" prop="orderNo" width="150"></el-table-column>
                <el-table-column label="工单名称" align="center" prop="orderName" width="150"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="工单发布人" align="center" prop="createUserName" width="150"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="工单状态" align="center" width="150" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ formatOrderStatus1(row.orderStatus) }}
                    </template>
                </el-table-column>
                <el-table-column label="工单执行人" align="center" width="150" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ row.engineerNames == null ? "-" : row.engineerNames }}
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" align="center" prop="startTime" width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="结束时间" align="center" prop="endTime" width="150" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="工单金额" align="center" prop="sum" width="150"></el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template #default="scope">
                        <div>
                            <el-button type="primary" text size="small" @click="handleOrderDetail(scope.row)"
                                style="margin-left: -10px;">详情</el-button>
                            <el-button type="primary" text size="small" @click="handleOrderLog(scope.row)"
                                style="margin-left: -10px;">工程日志</el-button>
                            <el-button type="primary" text size="small" @click="showFiles(scope.row)"
                                style="margin-left: -10px;">报告</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="flex items-center justify-center mt-5">
                <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                    :page-size="limit" @current-change="getData" />
            </div>
        </el-card>
        <SystemDialog title="查看日志" :visible="dialogTableVisible_orderLog" :height="40" :width="70" :showOkBtn="false"
            @on-close="dialogTableVisible_orderLog = false" @on-confirm="dialogTableVisible_orderLog = false">
            <template v-slot:content>
                <OrderLog v-if="dialogTableVisible_orderLog" :orderDetail="currOrderLog_orderDetail" />
            </template>
        </SystemDialog>
        <el-dialog v-model="dialogTableVisible_orderFiles" title="附件列表" width="60%" align-center>
            <el-tabs v-model="activeTabName" tab-position="left" class="demo-tabs" style="height: 300px"
                @tab-click="handleTabClick">
                <el-tab-pane label="项目资料" name="workOrder">
                    <OrderFiles :orderId="dialogOrderId" :fileType="fileType1" />
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="dialogTableVisible_orderFiles = false">
                                关闭
                            </el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="初始安装报告" name="initialInstall">
                    <OrderFiles :orderId="dialogOrderId" :fileType="fileType2" />
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="dialogTableVisible_orderFiles = false">
                                关闭
                            </el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="完工报告" name="completion">
                    <OrderFiles :orderId="dialogOrderId" :fileType="fileType3" />
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="dialogTableVisible_orderFiles = false">
                                关闭
                            </el-button>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { api_orders_list, api_project_constant } from "~/api/ordersApi"
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
import SystemDialog from "~/components/SystemDialog.vue";
import OrderLog from "~/components/order-log.vue";
import projectDetails from "./projectDetails.vue";
import OrderFiles from "~/components/order-files.vue";


// 页面变量
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

// 搜索条件
const searchForm = reactive({
    orderNo: "",
    orderName: "",
    customerId: "",
    orderStatus: null,
    customerRating: null,
    page: currentPage.value,
    size: limit.value,
    startTime: '',
    endTime: '',
})
const resetSearchForm = () => {
    searchForm.orderNo = ""
    searchForm.orderName = ""
    searchForm.projectId = ""
    searchForm.customerId = ""
    searchForm.orderStatus = null
    searchForm.customerRating = null
    getData()
}

const tableData = ref([])
const loading = ref(false)
const orderStatus = ref([])
const orderTypes = ref([])
const engineerStatusList = ref([])
//路由
const router = useRouter();
const store = useStore()
//工单日志
const dialogTableVisible_orderLog = ref(false)
const currOrderLog_orderDetail = ref(null)


//附件弹窗
const dialogTableVisible_orderFiles = ref(false)
const activeTabName = ref('workOrder'); // 初始值为第一个标签页
const dialogOrderId = ref(null);
const fileType1 =ref(0); // 项目资料
const fileType2  =ref(2); // 初始安装报告
const fileType3 =ref(3); // 完工报告

//点击报告按钮
const showFiles = (row) => {
    dialogOrderId.value = row.orderId
    activeTabName.value = 'workOrder'
    fileType1.value = 0
    fileType2.value =2
    fileType3.value = 3
    dialogTableVisible_orderFiles.value = true
}

//点击报告弹窗的tab
const handleTabClick = (tab) => {
    const type = tab.props.name;
    
}




const formatOrderStatus1 = (state) => {
    return orderStatus.value.find(x => x.code == state).description
}

// 点击日志按钮
const handleOrderLog = (row) => {
    currOrderLog_orderDetail.value = row
    dialogTableVisible_orderLog.value = true
}

//点击详情按钮
const handleOrderDetail = (row) => {
    store.commit("SetShipId", row.shipId)
    router.push({ path: "/shipDetail" })
}

// 生命周期函数
onMounted(() => {

    getProjectConstant()

    getData()

    //console.log('order projectId ', form.projectId)
})

// 获取订单状态
function getProjectConstant() {
    api_project_constant().then(res => {
        orderStatus.value = res?.orderStatuses
        engineerStatusList.value = res?.engineerStatuses
        orderTypes.value = res?.orderTypes
    })
}


// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }

    loading.value = true
    searchForm.page = currentPage.value
    api_orders_list(searchForm)
        .then(res => {
            console.log(res)
            tableData.value = res.records.map(o => {
                o.statusLoading = false
                return o
            })
            total.value = res.total
            currentPage.value = res.current

            // roles.value = res.roles
        })
        .finally(() => {
            loading.value = false
        })
}
</script>

<style lang="scss" scoped>
.demo-tabs .el-tabs__content{
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}   
</style>    